<html>
    <head>
        <style>
            body {
                margin: 0;
                font-family: sans-serif;
                display: flex;
                gap: 10px;
                flex-direction: column;
            }

            .box {
                width: 100px;
                height: 100px;
                background-color: #0077ff;
                display: flex;
                align-items: center;
                justify-content: center;
                text-align: center;
            }
        </style>
    </head>
    <body>
        <div class="box" id="mini">wrapper</div>
        <script type="module" src="/src/inc.js"></script>
        <script type="module">
            const { NativeAnimationWrapper } = window.Motion

            const element = document.getElementById("mini")
            const animation = element.animate(
                { transform: "translateX(100px)" },
                { duration: 100 }
            )

            const controls = new NativeAnimationWrapper(animation)

            controls.finished.then(() => {
                element.textContent = "finished"
            })
        </script>
    </body>
</html>
